<template>
  <div class="main">
    <a-space direction="vertical" :size="16" class="grid">

      <a-row justify="start">
        <a-col :span="2" ><a-input v-model="packageTypeQuery.id" placeholder="套餐类型编号" /></a-col>
        <a-col :span="2" ><a-input v-model="packageTypeQuery.packageTypeName" placeholder="套餐类型名称" /></a-col>
        <a-col :span="2" class="row">
          <a-select v-model="packageTypeQuery.status" placeholder="请选择状态" allow-clear>
            <a-option :value="1">上架</a-option>
            <a-option :value="0">下架</a-option>
          </a-select>
        </a-col>
        <a-col :span="1" class="row"><a-button type="outline" @click="getList" >查询</a-button></a-col>
      </a-row>


      <a-table :data="data"
               :scroll="scroll" :scrollbar="scrollbar"
               v-model:selectedKeys="selectList" :pagination="false"
               style="background-color: white;">
        <template #columns>
          <a-table-column title="编号" data-index="id"></a-table-column>
          <a-table-column ellipsis="true" title="名称" data-index="packageTypeName"></a-table-column>
          <a-table-column title="状态" data-index="status"></a-table-column>
          <a-table-column title="上传者" data-index="updateBy"></a-table-column>
          <a-table-column title="上传时间" data-index="updateTime"></a-table-column>
          <a-table-column title="操作">
            <template #cell="{record}">
              <a-button type="text" @click="select(record)" >选择</a-button>
            </template>
          </a-table-column>
        </template>

        <template #footer>
          <a-pagination v-model:current="packageTypeQuery.pageNum" :total="total"
                        v-model:page-size="packageTypeQuery.pageSize" @page-size-change="getList"
                        @change="getList"
                        show-total show-jumper show-page-size/>
        </template>
      </a-table>
    </a-space>
  </div>
</template>

<script setup lang="ts">
//@ts-ignore

import {ref} from "vue";
import type {PackageTypeDto, PackageTypeQuery} from "@/apis/taocan/taocanType";
import type {Reactive} from "vue-demi";
import {
  getPackageTypeList,
} from "@/apis/taocan/taocanType";
const scroll = {
  x: 1200,
  y: 600
};


const visible = ref(true);
const selectList = ref([])
const data:Ref<PackageTypeDto[]> = ref([])
const scrollbar = ref(true);
const total = ref(0)


/**
 * 套餐类型查询类
 * */
const packageTypeQuery:Reactive<PackageTypeQuery> = reactive({
  pageNum: 1,
  pageSize: 10,
  packageTypeName:null,
  status: null,
  updateBy: '',
  updateTime: '',
  id: null,
})

/**
 * 套餐类型实体类
 * */
const packageType:Reactive<PackageTypeDto> = reactive({
  id: 0,
  packageTypeName: '',
  status: 0,
  updateBy: localStorage.getItem('userId'),
  updateTime: '',
})

const flat = defineEmits(['select'])

/**
 *  选择按钮
 * */

const select = (record:any) => {

  flat('select',record)
}


/**
 * 获得套餐类型列表
 * */
const getList = () => {
  getPackageTypeList(packageTypeQuery).then(res => {
    data.value = res.data["data"].records
    total.value = res.data["data"].total
  })
}





getList()
</script>

<style lang="scss" scoped>
.grid {
  .row {
    margin: 0 10px;
  }
  margin: 10px;
  padding: 10px;
  background-color: white;
}
</style>